<template>
  <el-select
    v-model="selectedSeaCucumberOrigin"
    filterable
    placeholder="选择产地"
    ref="SeaCucumberOriginList"
    @change="handleSeaCucumberOriginChange"
    clearable
  >
    <el-option
      v-for="it in options"
      :key="it.id"
      :value="it.id"
      :label="it.name"
      >{{ it.name }}</el-option
    >
  </el-select>
</template>

<script>
import { mapGetters } from "vuex";

export default {
  name: "SeaCucumberOriginSelect",
  props: ["value"],
  computed: {
    ...mapGetters(["seaCucumberOriginList"]),
    selectedSeaCucumberOrigin: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit("input", val);
      },
    },
    options() {
      return this.seaCucumberOriginList;
    },
  },
  methods: {
    handleSeaCucumberOriginChange(value) {
      if (value) {
        let seaCucumberOrigin = this.seaCucumberOriginList.find((item) => {
          return item.id == value;
        });
        this.$emit("change", seaCucumberOrigin.id);
      } else {
        this.$emit("change", null);
      }
    },
  },
  created() {
    this.$store.dispatch("mall/loadSeaCucumberOriginList");
  },
};
</script>

<style scoped>
/* 可根据需要添加样式 */
</style>